<template>
  <!-- This section should be hidden by default and shown when there are todos -->
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="checkAll" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li :class="{completed: item.done}" v-for="(item, index) in list" :key="item.id">
        <div class="view">
          <input class="toggle" type="checkbox" :checked="item.done" @change="change(item.id)" />
          <label>{{item.name}}</label>
          <button class="destroy" @click="del(index)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<script>
import { computed } from 'vue';
export default {
  emits: ['change', 'del', 'checkAll'],
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  setup(props, {emit}) {
    // 状态取反
    const change = id => {
      emit('change', id)
    }
    // 删除
    const del = index => {
      emit('del', index)
    }
    // 全选
    const checkAll = computed({
        get() {
            return props.list.every(item => item.done)
        },
        set(value) {
            emit('checkAll', value)
        }
    })
    return {
      change,
      del,
      checkAll
    }
  }
};
</script>

<style>
</style>